<template>
	<view class="page-content">
		<view class="top-msg">
			<view class="flex-row" style="gap: 20rpx;">
				<u-image v-for="(item,index) in formdata.avatar" :key="index" :src="item" width="152rpx" height="152rpx"
					border-radius="24" />
			</view>
			<text v-if="isSelf" class="self-start text">{{formdata.nickName}}</text>
			<view v-else class="flex-row justify-between items-center mt-16">
				<view class="flex-row justify-start items-center" style="gap: 20rpx;">
					<text class="self-start text" style="margin-top: 0;">{{formdata.nickName}}</text>
					<block v-if="userinfo.id && userinfo.id != userId">
						<view v-if="!isGuanzhu" class="guanzhu" @click="addFans(userId)">
							关注
						</view>
						<view v-else class="guanzhu" style="background: #f4f4f4" @click="delFans(fansdetail.id)">
							已关注
						</view>
					</block>
				</view>
				<view>
					<u-icon name="chat" size="42" @click="handleToChat(userId)"></u-icon>
				</view>
			</view>
			
			<view class="flex-row items-start self-stretch group_4">
				<text class="flex-1 font text_2">
					{{formdata.introduce||'暂无'}}
				</text>
			</view>
		</view>
		<view class="fans flex-row">
			<view class="flex-col items-center group_3 equal-division-item_2">
				<text class="self-start font_2">{{statistics.gz}}</text>
				<text class="mt-12 font_3">关注</text>
			</view>
			<view class="flex-col items-center group_3 equal-division-item_2">
				<text class="self-start font_2">{{statistics.fans}}</text>
				<text class="mt-12 font_3">粉丝</text>
			</view>
			<view class="flex-col items-center group_3 equal-division-item_2">
				<text class="self-start font_2">{{statistics.hz}}</text>
				<text class="mt-12 font_3">获赞</text>
			</view>
		</view>
		<view class="cyquan">
			<view class="header">
				<u-sticky>
					<view class="sticky">
						<view class="flex-row items-center">
							<view style="width: 100%;">
								<u-tabs-swiper active-color="#000000" inactive-color="#999999" :bar-style="{background:'#FCD610'}"
									ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
							</view>
							<view class="flex-col items-center" style="width: 200rpx;">
								<image src="/static/index/search.png" style="height: 48rpx;width: 48rpx;" @click="handleSearch"></image>
							</view>
						</view>
						<u-line></u-line>
					</view>
				</u-sticky>
			</view>
			<view class="content">
				<template v-if="dataList.length===0&&status==='nomore'">
					<empty></empty>
				</template>
				<template v-else>
					<view class="cards">
						<block v-for="(item,index) in dataList">
							<circle-card :key="index" :data="item" @linkTo="handleToDetail(item.id)"
								@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
						</block>
					</view>
					<view class="loadmore">
						<u-loadmore :status="status" />
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import circleCard from "components/common/card/circle-card.vue";
	import chongyouquan from "../../../../api/chongyouquan.js";
	import mine from "../../../../api/mine.js";
	import empty from "components/common/empty/empty.vue";
	export default {
		data() {
			return {
				formdata: {
					avatar: [],
					introduce: '',
					nickName: '',
				},
				statistics: {
					gz: 0,
					fans: 0,
					hz: 0
				},
				list: [{
					name: '动态'
				}, {
					name: '收藏'
				}, {
					name: '喜欢'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				status: 'loadmore',
				dataList: [],
				filterParmas: {
					publisherId: '',
					pageNum: 0,
					pageSize: this.$config.pageSize,
				},
				userId:-1,
				isSelf:true,
				isGuanzhu:false,
				userinfo:undefined,
				fansdetail: null,
			};
		},
		onLoad(option) {
			if(uni.getStorageSync('userinfo')){
				this.userinfo=uni.getStorageSync('userinfo')
			}
			if (option.id) {
				this.userId=option.id;
				this.filterParmas.publisherId = option.id;
				this.getUserInfo(option.id);
				this.getFans();
			}
			this.observeElement();
			this.getLikeOrFensNum();
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.status = 'loadmore';
				this.current = index;
				this.dataList = [];
				this.filterParmas.pageNum = 0;
				if (index == 0) {
					this.getCYQList();
				} else {
					this.getLikeOrCollectList(index)
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.getCYQList();
			},
			observeElement() {
				// 获取当前页面的实例
				const page = this.$mp.page;
				// 创建交叉观察器实例
				const observer = uni.createIntersectionObserver(page, {
					thresholds: [0], // 设置触发阈值为0，即元素进入视口时触发
				});
				// 选择需要观察的节点
				observer.relativeToViewport({
					bottom: 10
				}).observe('.loadmore', (res) => {
					if (res.intersectionRatio > 0) {
						// 元素进入视口
						if (this.status === "loadmore")
							this.onreachBottom()
					}
				});
			},
			handleSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			getUserInfo(userid) {
				mine.getUserInfo(userid).then(res => {
					if (res.code == 200) {
						this.formdata = res.data;
						if(res.data.id!=this.userinfo.id){
							this.isSelf=false;
						}
						if (
							this.formdata.avatar !== null &&
							this.formdata.avatar !== undefined &&
							this.formdata.avatar
						) {
							this.formdata.avatar = this.formdata.avatar.split(",");
						} else {
							this.formdata.avatar = [];
						}
					}
				})
			},
			getCYQList() {
				if (this.status !== "loading") {
					this.status = "loading";
					this.filterParmas.pageNum++;
					chongyouquan
						.getCYQuanList(this.filterParmas)
						.then((res) => {
							if (res.code === 200) {
								this.dataList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.status = "nomore";
								else {
									this.status = "loadmore";
								}
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							this.status = "nomore";
							console.log(err);
						});
				}
			},
			getLikeOrCollectList(type) {
				if (this.status !== "loading") {
					this.status = "loading";
					this.filterParmas.pageNum++;
					chongyouquan
						.queryCollectorLike(
							this.filterParmas.publisherId,
							type
						)
						.then((res) => {
							if (res.code === 200) {
								this.dataList.push(...res.data);
								if (res.data?.length < this.$config.pageSize)
									this.status = "nomore";
								else {
									this.status = "loadmore";
								}
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							this.status = "nomore";
							console.log(err);
						});
				}
			},
			getLikeOrFensNum() {
				mine.getLikeOrFensNum(this.filterParmas.publisherId).then(res => {
					if (res.code === 200) {
						this.statistics = res.data;
					}
				})
			},
			handleToDetail(id) {
				uni.navigateTo({
					url: '/pages/quan/pet-circle-detail/pet-circle-detail?id=' + id
				})
			},
			handleChangeLike(e, item) {
				if (e === 0)
					chongyouquan.addOrDelLike(item.id, 2).then(res => {
						if (res.code === 200) {
							item.likeCount--
						} else
							throw Error()
					}).catch(err => {
						uni.showToast({
							title: '取消失败',
							icon: 'none'
						})
					})
				else
					chongyouquan.addOrDelLike(item.id, 1).then(res => {
						if (res.code === 200) {
							item.likeCount++
						} else
							throw Error()
					}).catch(err => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						})
					})
			},
			addFans(followId) {
				const data = {
					followId: followId,
					userId: this.userinfo.id,
				};
				chongyouquan.addFans(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "已关注",
						});
						this.isGuanzhu = !this.isGuanzhu;
					}
				});
			},
			delFans(id) {
				chongyouquan.delFans(id).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "已取消关注",
							icon: "none",
						});
						this.isGuanzhu = !this.isGuanzhu;
					}
				});
			},
			getFans() {
				mine
					.getFansList({
						followId: this.userId,
					})
					.then((res) => {
						if (res.code === 200) {
							for (var i = 0; i < res.rows.length; i++) {
								const item = res.rows[i];
								if (item.userId == this.userinfo.id) {
									this.isGuanzhu = true;
									this.fansdetail = item;
									break;
								}
							}
						} else {
							throw Error();
						}
					});
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			},
		},
		components: {
			circleCard,
			empty
		}
	}
</script>

<style lang="scss">
	.page-content {
		height: 100%;
		width: 100%;

		background: #f6f6f6;
		overflow-y: auto;

		.top-msg {
			padding: 0 32rpx;

			.text {
				margin-top: 28rpx;
				color: #000000;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 700;
				display: block;
			}
			.guanzhu {
					background: #fcd610;
					border-radius: 16rpx;
					height: 48rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					padding: 8rpx 32rpx;
				}

			.group_4 {
				margin-right: 8rpx;
				margin-top: 28rpx;

				.font {
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #999999;
				}

				.text_2 {
					color: #666666;
				}
			}
		}

		.fans {
			padding: 0 32rpx;

			.group_3 {
				margin: 24rpx 0;

				.font_2 {
					font-family: D-DIN-DIN, D-DIN-DIN;
					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.18rpx;
					color: #00000099;
				}
			}

			.equal-division-item_2 {
				padding: 8rpx 28rpx;
			}
		}

		.cyquan {
			background-color: #FFFFFF;
			min-height: 100%;
			border-top-right-radius: 48rpx;
			border-top-left-radius: 48rpx;
			overflow-y: auto;

			.sticky {
				background-color: #FFFFFF;
			}

			.content {
				height: 100%;
				padding: 16rpx;

				.cards {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 22rpx 24rpx;
					margin-bottom: 32rpx;
				}
			}
		}
	}
	
</style>